import React, { Fragment, useState } from 'react';
import { Tabs, Card, Button } from 'antd';
import QueryPage from '@/components/QueryPage';
import { eventTrack } from '@/utils/track';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
// AuthComponent AuthCode权限控制
import AuthCode from '@/utils/auth/AuthCode';
import AuthComponent from '@/utils/auth/AuthComponent';
import { withRoutePage } from '@/utils/enhanceUtils';
import Recommend from './Recommend';
import Management from './Management';
import styles from './index.less';

const { TabPane } = Tabs;

const List = props => {
    const {
        location: { query }
    } = props;
    const [activeKey, setActiveKey] = useState(query.activeKey && query.activeKey === '2' ? '2' : '1');
    const {
        route: { path },
        route
    } = props;
    // 按钮权限控制
    const { authCode } = new AuthCode(route.code);
    // mine: 我的候选人  company: 候选人管理
    let type = '';
    if (path === '/office/personnelManagement/recruit/candidate') {
        type = 'company';
    } else if (path === '/personal/portal/recruit/candidate') {
        type = 'mine';
    } else {
        throw new Error('未找到路径！请检查');
    }
    const [addVisible, setaddVisible] = useState(false); // 监听添加候选人模态框
    const extraButton = (
        <Button
            type="primary"
            className="addBtn"
            href="#"
            onClick={e => {
                e.preventDefault();
                setaddVisible(true);
                // 埋点
                eventTrack({
                    eventName: 'personal_my_recruit_candidate_add_click',
                    eventProps: { label: '我的候选人-添加候选人' }
                });
            }}
        >
            添加候选人
        </Button>
    );
    if (type === 'company') {
        return (
            <PageHeaderWrapper>
                <Card
                    bordered={false}
                    title="候选管理"
                    extra={<AuthComponent code={authCode('add')}>{extraButton}</AuthComponent>}
                >
                    <Management
                        activeKey={activeKey}
                        {...props}
                        addVisible={addVisible}
                        setaddVisible={setaddVisible}
                    />
                </Card>
            </PageHeaderWrapper>
        );
    }

    return (
        <Fragment>
            <QueryPage
                searchBoxStyle={styles.fixSearchBoxStyle}
                extraButton={activeKey === '1' && extraButton}
                routeType="myrecruit"
                form={
                    <Tabs activeKey={activeKey} onChange={key => setActiveKey(key)}>
                        <TabPane tab="我管理的候选人" key="1">
                            <Management
                                activeKey={activeKey}
                                {...props}
                                addVisible={addVisible}
                                setaddVisible={setaddVisible}
                            />
                        </TabPane>
                        <TabPane tab="推荐给我的候选人" key="2">
                            <Recommend activeKey={activeKey} {...props} />
                        </TabPane>
                    </Tabs>
                }
            />
        </Fragment>
    );
};

export default withRoutePage(List);
